/* 公共 */
* {
    padding: 0;
    margin: 0;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
        Microsoft YaHei, SimSun, sans-serif;
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

img {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    //   mix-blend-mode: multiply;
    object-fit: cover;
    -o-object-fit: cover;
}

a {
    text-decoration: none;
    color: #606266;
}

/* 盒子模型初始化 */
.el-box-init {
    border-radius: 4px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 内边距 */
.el-pd-10 {
    padding: 10px;
}

.el-pd-20 {
    padding: 20px;
}

.el-pd-b-20 {
    padding-bottom: 20px;
}

/* 外边距 */
.el-mg-20 {
    margin: 20px;
}

/* 右外边框30 */
.el-mg-r-30 {
    margin-right: 30px !important;
}

/* 下外边框10 */
.el-mg-b-10 {
    margin-bottom: 10px !important;
}

/* 背景颜色 */
.el-bkgd-white {
    background: #ffffff;
}

.el-bkgd-blue {
    background: #cbe1f9;
}

/* 下拉选框菜单 */
.option-level0 {
    margin-left: 30px;
}

.option-level1 {
    margin-left: 40px;
}

.option-level2 {
    margin-left: 60px;
}

.option-level3 {
    margin-left: 80px;
}

.option-level4 {
    margin-left: 100px;
}

.option-level5 {
    margin-left: 120px;
}

.option-level6 {
    margin-left: 140px;
}

/* 搜索盒 */
.search-box {
    padding: 10px;
}

/* dialog弹框 */
.el-dialog-600 {
    max-width: 600px;
}

.el-dialog-1000 {
    max-width: 1000px;
}

.el-dialog-1200 {
    max-width: 1200px;
}

/* 文字缩进 */
.el-indent-2 {
    text-indent: 2em;
}

/* table表格icon图标切换 */
.el-table {
    .el-table__expand-icon {
        margin-right: 7px !important;

        .el-icon-arrow-right {
            &::before {
                content: '+';
                font-size: 17px;
                color: #9ebbc2;
                opacity: 0.8;
                width: 18px;
                height: 18px;
                display: block;
                border: 1px solid #e8e8e8;
            }
        }
    }

    .el-table__expand-icon--expanded {
        transform: none;

        .el-icon-arrow-right {
            &::before {
                content: '-';
            }
        }
    }
}

/* 表格过滤 */
.table-filter {
    padding: 10px 20px;

    .el-form-item {
        margin-bottom: 0 !important;
    }
}

.table-wrap {
    margin-top: 20px;
    padding: 10px 20px;
}

.el-popover-minImg {
    width: 30px;
    height: 30px;
    margin-bottom: -8px;
    cursor: pointer;
}

.el-popover-img {
    max-width: 300px;
    max-height: 300px;
}

/* 分页 */
.el-pagination {
    text-align: center;
    margin-top: 20px;
}

/* 上传组件 */
.avatar-uploader {
    .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;

        &:hover {
            border-color: #409eff;
        }
    }

    .avatar-uploader-icon {
        font-size: 30px;
        color: #8c939d;
        width: 120px;
        height: 120px;
        line-height: 120px;
        text-align: center;
    }
}

.avatar-box {
    display: block;
    width: 120px;
    height: 120px;
    position: relative;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;

    .avatar {
        width: 120px;
        height: 120px;
        display: block;
        object-fit: cover;
    }

    .el-icon-close {
        position: absolute;
        right: -5px;
        top: -5px;
        background: #f56c6c;
        color: #fff;
        cursor: pointer;
        border-radius: 4px;
    }
}

/* 表单部分 */
.table-desc {
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 表单包裹 */
.el-form-wrap {
    display: flex;

    span {
        white-space: nowrap;
        margin-left: 5px;
    }
}

/* 文字渐变色 */
.text-gradient {
    @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
        background-image: -webkit-linear-gradient(left,
                #36a8f1,
                rgb(30, 197, 44) 25%,
                #36a8f1 50%,
                rgb(30, 197, 44) 75%,
                #36a8f1);
        color: transparent;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        background-size: 200% 100%;
        -webkit-background-size: 200% 100%;
        animation: masked-animation 2s infinite linear;
        -webkit-animation: masked-animation 2s infinite linear;
    }

    @keyframes masked-animation {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -100% 0;
        }
    }

    @-webkit-keyframes masked-animation {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: -100% 0;
        }
    }
}